<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{width:200px;float: left;border:solid 1px black;text-align:center}
        .cont p{text-align:left}
        .cont .goodsImg{width:80%;height:200px;}
        .cont .logo{width:50px;}
        .cont .goodsName{line-height:20px;height:40px;overflow: hidden;}
    </style>
</head>
<body>
    <div class="box">
        <div class="cont" v-for="item in goods" :key="item.goodsId">
            <img :src="item.goodsImg" alt="" class="goodsImg">
            <p class="goodsName">名称：{{item.goodsName}}</p>
            <p>价格：{{item.price}}</p>
            <p>库存：{{item.stock}}</p>
            <p>销量：{{item.sale}}</p>
            <p>分类：{{item.brand}}</p>
            <img :src="item.logo" alt="" class="logo">
            <input type="button" value="加入购物车" @click="addCart(item.goodsId)">
        </div>
    </div>

</body>
<script src="../vue.global.js"></script>
<script>
    Vue.createApp({
        data(){
            return {
                goods:[]
            }
        },
        created(){
            // 在组件创建之后，立即发起数据请求
            fetch("http://20.187.111.28:3000/getgoods").then(res=>res.json()).then(res=>{
                // 请求成功后，解析数据，并将数据绑定到vue实例
                this.goods = res.data.slice(0,10)
            })
        },
        methods:{
            addCart(id){
                // 根据传入的id获取在总数据中的索引
                const goodsIndex = this.getIndex(this.goods, id);
                // 获取本地存储中的购物车信息，并做默认处理
                let goods = localStorage.getItem("goods");
                goods = goods ? JSON.parse(goods) : [];
                // 从本地存储的数据中查询当前要添加的商品索引，以此判断是否存在该条数据
                const cartIndex = this.getIndex(goods, id);
                // 判断是否获取到该条数据信息
                if(cartIndex === null){
                    // 没有获取到：新增
                    goods.push({
                        goodsId: id,
                        num: 1,
                        price: this.goods[goodsIndex].price,
                        check: false,
                        goodsName: this.goods[goodsIndex].goodsName,
                        goodsImg:this.goods[goodsIndex].goodsImg
                    })
                }else{
                    // 获取到了：修改数量
                    goods[cartIndex].num++;
                }
                // 将程序中操作完毕后的数据，存入本地存储
                localStorage.setItem("goods", JSON.stringify(goods));
            },
            getIndex(data, id){
                // 工具：根据指定id查询指定数据中的索引
                let i = 0;
                const flag = data.some((val,idx)=>{
                    i = idx;
                    return val.goodsId === id
                })
                return flag ? i : null;
            }
        }
    }).mount(".box");



</script>
</html>